<template>
    <div>
        <el-upload
            :action="uploadUrl"
            :headers="headers"
            :list-type="listType"
            :multiple="false"
            :show-file-list="showFileList"
            :file-list="fileList"
            :before-upload="handleBeforeUpload"
            :on-success="handleUploadSuccess"
            :on-remove="handleRemove"
            :on-preview="handlePreview"
            :class="{disabled : fileList[0].url}"
        >
            <i class="el-icon-plus" v-if="listType === 'picture-card'"></i>
            <el-button size="small" type="primary" v-else>{{ btn }}</el-button>
        </el-upload>

        <el-dialog :visible.sync="dialogVisible" :modal="false">
            <img width="100%" :src="fileList[0].url" alt="" />
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/libs/auth";
import { baseApi } from '@/config'

export default {
    name: "LocalSingleUpload",
    props: {
        value: String,
        btn: {
            type: String,
            default: "点击上传"
        },
        listType: {
            type: String,
            // picture,picture-card
            default: "picture"
        },
        action:{
            type: String,
            default: ''
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        imageUrl() {
            return this.value;
        },
        imageName() {
            if (this.value != null && this.value !== "") {
                return this.value.substr(this.value.lastIndexOf("/") + 1);
            } else {
                return null;
            }
        },
        fileList() {
            return [
                {
                    name: this.imageName,
                    url: this.imageUrl
                }
            ];
        },
        showFileList: {
            get: function() {
                return (
                    this.value !== null &&
                    this.value !== "" &&
                    this.value !== undefined
                );
            },
            set: function(newValue) {}
        }
    },

    data() {
        return {
            token: null,
            baseApi: null,
            uploadUrl: null,
            headers: {},
            dialogVisible: false,
        };
    },

    created() {
        if(this.action) {
            this.uploadUrl = baseApi + this.action
        } else {
            this.uploadUrl = baseApi + '/system/file/upload'
        }

        this.headers = {
            token: getToken()
        }
    },

    methods: {
        emitInput(val) {
            this.$emit("input", val);
        },
        handleRemove(file, fileList) {
            this.emitInput("");
        },
        handlePreview(file) {
            this.dialogVisible = true;
        },
        handleBeforeUpload(file) {
            this.$emit("update:loading", true);
            this.$notify({ title: '提示', message: '正在上传，导入数据，请稍等', type: 'info' });
        },
        handleUploadSuccess(res, file) {
            if(this.ResultMessage(res, false)) {
                this.showFileList = true;
                this.fileList.pop();
                if(res.status && res.data) {
                    this.fileList.push({
                        name: file.name,
                        url: baseApi + "/upload/" + res.data.path
                    });
                    this.emitInput(this.fileList[0].url);
                }

                this.$notify({ title: '提示', message: '上传成功，操作完成!', type: 'success' });
            } else {
                this.$notify({ title: '提示', message: '上传失败', type: 'error' });
            }
            this.$emit("update:loading", false);
            this.$emit("reloadFn", null)
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.disabled .el-upload--picture-card, .disabled .el-upload--picture{
    display: none;
}
</style>
